﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AngularJS 表格</title>
    <script type="text/javascript" src="Scripts/angular.js"></script>
    <style>
        table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; }
            table tr:nth-child(odd) { background-color: #f1f1f1; }
            table tr:nth-child(even) { background-color: #ffffff; }
    </style>
</head>
<body>
    <div ng-app="myApp" ng-controller="customersCtrl">

        <table>
            <!--<tr ng-repeat="x in names">-->
            <!--<tr style="{{$even?'background-color: #f1f1f1':''}}" ng-repeat="x in names">-->
            <tr ng-repeat="x in names | orderBy : 'Country'">

                <td>{{ $index + 1 }}</td><!--显示序号 ($inde x)-->
                <td>{{ x.Name }}</td>
                <td>{{ x.Country }}</td>
                <!--<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
                <td ng-if="$even">{{ x.Name }}</td>
                <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
                <td ng-if="$even">{{ x.Country }}</td>-->
                <!--<td style="{{$even?'background-color: #f1f1f1':''}}">{{$index + 1}}</td>
                <td style="{{$even?'background-color: #f1f1f1':''}}">{{x.Name }}</td>
                <td style="{{$even?'background-color: #f1f1f1':''}}">{{x.Country}}</td>-->
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function ($scope, $http) {
            $http.get("/data/Customers.json")
                .then(function (result) {
                    $scope.names = result.data.records;
                });
        });
    </script>
</body>
</html>